<template>
    <loading v-if="tracks.length == 0" class="absolute top-2/3 left-1/2 translate-x-[-50%] translate-y-[-50%]">
    </loading>
    <div class="w-full" v-else>
        <!-- 顶部 -->
        <div class="flex p-6 pt-0 items-center">
            <div class="relative">
                <img class="object-cover max-w-[12rem] rounded-lg" :src="songListDetailInfo?.playlist.coverImgUrl"
                    alt="">
                <div class="absolute top-2 right-2 bg-[rgba(0,0,0,0.4)] w-fit text-white px-2 rounded">{{
                    setVNumber(songListDetailInfo?.playlist.playCount as number) }}
                </div>
            </div>
            <div class="flex flex-col ml-10 justify-between">
                <div>
                    <h1 class="font-bold text-2xl">{{ songListDetailInfo?.playlist.name }}</h1>
                    <p class="line-clamp-3 my-2 text-[var(--iconBg)]">
                        {{ songListDetailInfo?.playlist.description }}
                    </p>
                    <div class="flex my-3">
                        <img class="w-6 h-6 border rounded-full" :src="songListDetailInfo?.playlist.creator.avatarUrl"
                            alt="">
                        <span class="mx-2 text-[var(--iconBg)]">{{ songListDetailInfo?.playlist.creator.nickname
                            }}</span>
                        <span class="px-5">标签：<span class="text-blue-500"
                                v-for="item in songListDetailInfo?.playlist.tags">{{
                                    item + " " }}</span></span>
                        <span class="ml-2 text-[var(--iconBg)]">{{
                            timestampToDate(songListDetailInfo?.playlist.createTime as number) }} 创建</span>
                    </div>
                </div>
                <div class="flex items-center relative">
                    <i class="iconfont icon-24gf-play absolute text-white before:text-xs left-3"></i>
                    <button
                        class="text-white text-sm tracking-widest bg-[var(--playBg)] rounded-[4px] h-8 px-4 pl-7 mr-3">播放全部</button>
                    <el-button :icon="FirstAidKit">{{ setVNumber(songListDetailInfo?.playlist.subscribedCount as number)
                        }}</el-button>
                    <el-button :icon="Download">下载</el-button>
                    <el-button :icon="MoreFilled"></el-button>
                </div>
            </div>
        </div>
        <!-- 列表 -->
        <div class="px-6 relative">
            <el-input v-show="showInput" @focus="isFocus = true" @blur="isFocus = false" v-model="keyWord" clearable
                style="position: absolute;top: .2rem; right: 2rem;z-index: 50;transition: width .3s;" placeholder="搜索"
                :style="{ width: isFocus ? '11rem' : '5rem' }" :prefix-icon="Search" />
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :label="`歌曲 (${setVNumber(songListDetailInfo?.playlist.trackCount as number)})`"
                    name="first">
                    <!-- 歌曲列表 -->
                    <SongList :songList="filterTableData" :slider="false"></SongList>
                </el-tab-pane>
                <el-tab-pane :label="`评论 (${setVNumber(songListDetailInfo?.playlist.commentCount as number)})`"
                    name="second">
                    <!-- 发布评论 -->
                    <el-input v-model="textarea" :rows="4" type="textarea" maxlength="130" show-word-limit
                        placeholder="说点什么吧" resize="none" />
                    <loading v-if="vloading" class="scale-50 mt-[-2rem]">
                    </loading>
                    <!-- 评论列表 -->
                    <ul class="my-3" v-else>
                        <li class="font-bold text-lg">
                            最新评论 <sup>{{ songListDetailInfo?.playlist.commentCount }}</sup>
                        </li>
                        <li class="flex border-b py-2 my-5" v-for="item in comments" :key="item.commentId">
                            <img loading="lazy" class="object-cover w-14 h-14 border rounded-full"
                                :src="item.user.avatarUrl" alt="">
                            <div class=" w-full ml-3">
                                <div class="flex items-center">
                                    <p class="text-blue-400 mr-1">{{ item.user.nickname }}</p>
                                    <img class="object-cover w-12"
                                        v-if="item.user.vipRights && item.user.vipRights.associator"
                                        :src="item.user.vipRights.associator?.iconUrl" alt="">
                                </div>
                                <p class="line-clamp-3 mt-1 mb-4">{{ item.content }}</p>
                                <div class="w-full flex justify-between">
                                    <span class="text-[var(--iconBg)]">{{ item.timeStr }}</span>
                                    <div>
                                        <i class="iconfont icon-good ml-5 hover:cursor-pointer"></i>
                                        <i class="iconfont icon-zhuanfa ml-5 hover:cursor-pointer"></i>
                                        <i class="iconfont icon-xiaoxi ml-5 hover:cursor-pointer"></i>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="text-center">
                            <el-button @click="loadMoreComments" :loading="loadMore"
                                v-if="showLodaMore">加载更多评论</el-button>
                            <el-empty :image-size="60" v-else description="没有更多评论了"></el-empty>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane :label="`收藏 (${setVNumber(songListDetailInfo?.playlist.subscribers.length as number)})`"
                    name="third">
                    <div class="w-full p-6">
                        <ul class="grid grid-cols-4 gap-4" v-if="songListDetailInfo?.playlist.subscribers.length">
                            <li v-for="item in songListDetailInfo?.playlist.subscribers" :key="item.userId"
                                class="w-52 flex flex-col items-center p-5 hover:bg-white cursor-pointer transition-all rounded-lg">
                                <img class="object-cover w-40 h-40 rounded-full" :src="item.avatarUrl" alt="">
                                <p class="my-2">{{ item.nickname }}</p>
                                <p class="line-clamp-1">{{ item.signature ? item.signature : "这个人很懒，什么都没有留下" }}</p>
                            </li>
                        </ul>
                        <el-empty v-else :image-size="60" description="还没有人收藏哦~"></el-empty>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { Search, FirstAidKit, Download, MoreFilled } from '@element-plus/icons-vue'
import { ref, watch, getCurrentInstance, computed } from "vue"
import { useRoute } from "vue-router"
import { useStore } from "@renderer/store"
import { storeToRefs } from "pinia"
import { setVNumber, timestampToDate } from "@renderer/hooks"
import type { TabsPaneContext } from 'element-plus'
const { songListDetail, commentPlaylist } = useStore()
const { songListDetailInfo, tracks } = storeToRefs(songListDetail)
const { comments } = storeToRefs(commentPlaylist)
const ctx = getCurrentInstance()
const bus = ctx?.appContext.config.globalProperties.$bus
const activeName = ref("first")
const keyWord = ref("")
const isFocus = ref(false)
const showInput = ref(true)
const loadMore = ref(false)
const showLodaMore = ref(true)
const vloading = ref(true)
const pageSize = ref(20)
const route = useRoute()
const textarea = ref("")
watch(() => route.query.id, async (newValue, oldValue) => {
    let newKeyWords = newValue
    let oldKeyWords = oldValue
    if (!newKeyWords) {
        newKeyWords = oldKeyWords as string
    }
    tracks.value = []
    // 获取歌单详情
    await songListDetail.getSongListDetail(route.query.id as string)
    setValue()
}, {
    immediate: true
})
// 对应歌曲和播放信息的关系
const setValue = () => {
    for (let i = 0; i < tracks.value.length; i++) {
        for (let j = 0; j < songListDetailInfo.value!.privileges.length; j++) {
            if (tracks.value[i].id == songListDetailInfo.value!.privileges[j].id) {
                tracks.value[i].privilege = songListDetailInfo.value!.privileges[j]
            }
        }
    }
}
// 搜索歌曲
const filterTableData = computed(() =>
    tracks.value.filter(
        (data) =>
            !keyWord.value ||
            data.name.toLowerCase().includes(keyWord.value.toLowerCase())
    )
)
// 获取歌单评论
const getSongListComment = async (id: number | string) => {
    await commentPlaylist.getCommentPlaylist(id)
}
// 评论
const handleClick = (tab: TabsPaneContext) => {
    if (tab.paneName == "second") {
        getSongListComment(route.query.id as string).then(() => {
            vloading.value = false
            if (comments.value.length == 0) {
                showLodaMore.value = false
            }

        })
    }
    tab.paneName == "first" ? showInput.value = true : showInput.value = false
}
// 加载更多评论
const loadMoreComments = async () => {
    loadMore.value = true
    let num = comments.value.length
    let num2 = 0
    pageSize.value += 20
    await commentPlaylist.getCommentPlaylist(route.query.id as string, 2, 1, pageSize.value).then(() => {
        loadMore.value = false
        num2 = comments.value.length
    })
    if (num == num2) {
        showLodaMore.value = false
    }
}
</script>

<style scoped lang='less'></style>